<template>
  <div>
    <!-- 父子组件通信，props -->
    <Todo :list="list">
          <!-- 填坑:作用域插槽的坑 
           slot-scope代表填的是作用域插槽的坑
          -->
         <template slot-scope="{row,index}">
               <h1 :style="{color:row.done?'pink':'purple'}">-{{index}}---{{row.title}}</h1>
         </template>
    </Todo>
  </div>
</template>

<script>
import Todo from "./components/todo";
export default {
  name: "",
  data() {
    return {
      list: [
        { id: 1, title: "吃饭", done: false },
        { id: 2, title: "睡觉", done: false },
        { id: 3, title: "打豆豆", done: true },
        { id: 4, title: "喝酒", done: false },
        { id: 5, title: "烫头", done: true },
      ],
    };
  },
  components: {
    Todo,
  },
};
</script>

<style scoped>
</style>
